<template>
  <div class="Invitation_code">
    <c-title :hide="false" text="邀请码"></c-title>
    <diyBackGround minHeight="4.94rem"></diyBackGround>
    <div class="code_box">
      <div class="codeDetail">
        <div class="codeDetail_title">邀请码：{{ info.usable_code_count }}</div>
        <div class="codeDetail_txt">消耗{{ info.code_point }}{{credit1}}+{{ info.code_money }}现金手续费可生成一个邀请码</div>
        <div class="codeDetail_btn">
          <div class="codeDetail_btn_c" v-if="info.code_status" @click="generate = true">生成</div>
          <div class="codeDetail_btn_z" @click="generateOpen">转让</div>
        </div>
      </div>
      <van-tabs v-model="active" @change="tabChange" line-width="20px" background="transparent" title-inactive-color="#454545" title-active-color="#F15353">
        <!-- <van-tab title="全部" name="" :title-style="'' == active ? 'font-weight: bold;font-size: 0.94rem;' : ''"></van-tab> -->
        <van-tab title="未使用" name="0" :title-style="0 === active ? 'font-weight: bold;font-size: 0.94rem;' : ''"></van-tab>
        <van-tab title="已使用" name="1" :title-style="'1' == active ? 'font-weight: bold;font-size: 0.94rem;' : ''"></van-tab>
        <van-tab title="已转让" name="2" :title-style="2 == active ? 'font-weight: bold;font-size: 0.94rem;' : ''"></van-tab>
      </van-tabs>
      <div class="list">
        <van-checkbox-group v-model="result" ref="checkboxGroup">
          <div class="lis" v-for="item in codeList" :key="item" @click="tapList(item)">
            <div class="lis_t">
              <div class="lis_t_l">
                <van-checkbox v-if="showCheckOption" :name="item" icon-size="16px" style="margin-right: 0.34rem"></van-checkbox>
                <div class="code">邀请码：{{ item.code }}</div>
                <div class="tag" v-clipboard:copy="item.code" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</div>
              </div>
              <div class="lis_t_r" v-if="item.use_type === 0" @click="showCodeOpen(item.id)">
                <i class="iconfont icon-life-code"></i>
              </div>
            </div>
            <div class="lis_t">
              <div class="lis_t_l time">获得时间：{{ item.created_at }}</div>
              <div class="status">{{ item.use_type == 1 ? "已使用" : item.use_type == 2 ? "已转让" : "未使用" }}</div>
            </div>
          </div>
        </van-checkbox-group>
      </div>
    </div>
    <div class="pos" @click="to_record">生成记录</div>
    <div class="pos_select" v-if="showCheckOption">
      <van-checkbox v-model="checked" @change="allChange">全选</van-checkbox>
      <div class="btnBox">
        <div class="cancel btn" @click="initPopupClose">取消</div>
        <div class="confirm btn" @click="generateConfirm">确认</div>
      </div>
    </div>

    <van-popup v-model="generate" style="width: 15.63rem" round :close-on-click-overlay="true">
      <div class="generateBox">
        <div class="txt">生成邀请码</div>
        <div class="generateNum">生成数量</div>
        <div class="generateNum_inp">
          <input type="number" v-model="generateCode" placeholder="请输入生成数量" />
        </div>
        <div class="generateTips">消耗{{ info.code_point }}{{credit1}}+{{ info.code_money }}现金手续费</div>
      </div>

      <div class="generateBtn">
        <div class="btn" @click="initPopupClose">取消</div>
        <div class="btn" @click="generate_tips = true">确认</div>
      </div>
    </van-popup>

    <van-popup v-model="transferenceCode" style="width: 15.63rem" round :close-on-click-overlay="true">
      <div class="generateBox">
        <div class="txt">转让邀请码</div>
        <div class="generateNum">转让会员</div>
        <div class="generateNum_inp">
          <input type="number" v-model="transference_ID" placeholder="请输入会员ID" @blur="transferenceCode_inp" />
        </div>
        <div class="generateTips" v-if="tMember">会员昵称：{{ tMember.nickname }} 姓名：{{ tMember.realname }}</div>
      </div>

      <div class="generateBtn">
        <div class="btn" @click="initPopupClose">取消</div>
        <div class="btn" @click="transferenceCode_confirm">确认</div>
      </div>
    </van-popup>
    <van-popup v-model="generate_tips" style="width: 15.63rem" round :close-on-click-overlay="true">
      <div class="generateBox">
        <div class="txt">生成邀请码</div>
        <div class="tips_txt">确定要消耗{{ info.code_point * generateCode }}{{credit1}}+{{ info.code_money * generateCode }}现金手续费生成{{ generateCode }}个邀请码吗？</div>
      </div>
      <div class="generateBtn">
        <div class="btn" @click="initPopupClose">取消</div>
        <div class="btn" @click="generateCreatOrder">确认</div>
      </div>
    </van-popup>
    <van-popup v-model="showCode" style="background: transparent" :close-on-click-overlay="true">
      <div class="generateBox" style="border-radius: 0.63rem; width: 15.63rem; background: #ffffff; margin-bottom: 1rem">
        <div class="txt">邀请二维码</div>
        <div class="code">
          <img :src="code_url" alt="" />
        </div>
      </div>
      <i class="iconfont icon-adsystem_icon_cancle" @click="initPopupClose"></i>
    </van-popup>
  </div>
</template>
<script>
import diyBackGround from "components/diyBackGround";
import { scrollMixin } from "utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: "0",
      checked: false,
      result: [],
      // 生成邀请码
      generate: false,
      // 生成提示
      generate_tips: false,
      showCode: false,
      generateCode: "",
      // 转让邀请码
      transferenceCode: false,
      transference_ID: "",
      info: [],
      codeList: [],
      page: 1,
      total_page: 0,
      isLoadMore: true,
      tMember: null,
      showCheckOption: false,
      code_url: "",
      credit1:'积分'
    };
  },
  activated() {
    let member_center = JSON.parse(localStorage.getItem("yz_basic_info")).lang.member_center;
    this.credit1 = member_center.credit1;
    this.init();
    this.getData();
  },
  methods: {
    to_record(){
      this.$router.push(this.fun.getUrl("Invitation_code_list", {}));
    },
    async showCodeOpen(cid) {
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.code.getCodeImage", { id: cid }, "");
      if (result) {
        this.code_url = data.code_url;
        this.showCode = true;
      } else {
        this.$toast(msg);
      }
    },
    onCopy(e) {
      Toast({
        message: "复制成功",
        position: "bottom",
        duration: 500
      });
    },
    onError(e) {
      Toast({
        message: "复制失败",
        position: "bottom",
        duration: 1000
      });
    },
    // transferenceCodeClose() {
    //   this.initPopupClose();
    // },
    async transferenceCode_confirm() {
      if (!this.transference_ID) {
        return this.$toast("请输入转让邀请码会员");
      }
      if (this.result.length <= 0) {
        return this.$toast("请选择转让邀请码");
      }
      console.log(this.transference_ID, this.result);
      let ids = this.result.map(item => item.id);
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.code.exchange", { exchange_uid: this.transference_ID, exchange_ids: ids }, "");
      if (result) {
        this.$toast(msg);
        this.initPopupClose();
      } else {
        this.$toast(msg);
      }
    },
    async transferenceCode_inp() {
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.code.getMember", { uid: this.transference_ID }, "");
      if (result) {
        this.tMember = data;
      } else {
        this.tMember = null;
        this.$toast(msg);
      }
    },
    tabChange() {
      this.init();
      this.getData();
    },
    init() {
      this.codeList = [];
      this.page = 1;
      this.total_page = 0;
    },
    // 转让才要选择邀请码
    generateConfirm() {
      if (this.result.length == 0) {
        this.$toast("请选择要转让的邀请码");
        return;
      }
      // 转让
      this.transferenceCode = true;
    },
    async generateCreatOrder() {
      // 生成邀请码跳转支付页
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.create", { code_num: this.generateCode }, "");
      if (result) {
        this.$router.push(this.fun.getUrl("orderpay", { order_ids: data.order_ids }));
        this.initPopupClose();
      } else {
        this.initPopupClose();
        this.$toast(msg);
      }
    },
    generateOpen() {
      console.log(this.codeList, "dwwwwwwwwwwwww");
      if (this.codeList.length <= 0) {
        return;
      }
      this.showCheckOption = true;
    },
    initPopupClose() {
      this.showCheckOption = false;
      this.result = [];
      this.checked = false;
      this.tMember = null;
      this.generate = false;
      this.transferenceCode = false;
      this.showCode = false;
      this.generate_tips = false;
      this.generateCode = "";
      this.getData(true);
    },
    async getData(key = false) {
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.code.index", { use_type: this.active }, "");
      if (result) {
        console.log(data);
        this.info = data;
        this.total_page = data.last_page;
        if (!key) {
          this.codeList = data.data;
        }
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page,
          use_type: this.active
        };
        let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.code.index", json, "");
        this.isLoadMore = true;
        if (result) {
          this.codeList = this.codeList.concat(data.data);
        } else {
          this.page = this.page - 1;
          this.$toast(msg);
        }
      }
    },
    tapList(item) {
      if (this.result.indexOf(item) > -1) {
        this.result.splice(this.result.indexOf(item), 1);
        return;
      }
      this.result.push(item);
    },
    allChange() {
      if (this.checked) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll(false);
      }
    }
  },
  components: { diyBackGround }
};
</script>
<style lang="scss" scoped>
.generateBtn {
  border-top: 1px solid #ececec;
  display: flex;
  .btn {
    height: 2.78rem;
    flex: 1;
    text-align: center;
    line-height: 2.78rem;
    font-size: 0.94rem;
    color: #f15353;
  }
  .btn:first-child {
    border-right: 1px solid #ececec;
    font-size: 0.94rem;
    color: #7e7e7e;
  }
}
.icon-adsystem_icon_cancle {
  font-size: 2rem;
  color: #ffffff;
}
.generateBox {
  padding: 0 0.84rem;
  padding-top: 1.03rem;
  display: flex;
  flex-direction: column;
  .code {
    width: 7.5rem;
    height: 7.5rem;
    background: red;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-top: 1.63rem;
    margin-bottom: 1.53rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .txt {
    font-weight: bold;
    font-size: 1rem;
    color: #00001c;
  }
  .generateTips_check {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    color: #f15353;
  }
  .tips_txt {
    text-align: center;
    font-size: 0.81rem;
    color: #00001c;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .generateTips {
    font-size: 0.81rem;
    color: #808080;
    text-align: left;
    margin-bottom: 1.63rem;
  }
  .generateNum {
    font-weight: 500;
    font-size: 0.88rem;
    color: #00001c;
    margin-bottom: 0.5rem;
    text-align: left;
    margin-top: 1.28rem;
  }
  .generateNum_inp {
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    border: 0.03rem solid #d6d6dc;
    height: 2.25rem;
    margin-bottom: 0.5rem;
    input {
      border: none;
      height: 100%;
      width: 100%;
      padding: 0 0.5rem;
    }
  }
}
.pos_select {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3.5rem;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  justify-content: space-between;
  .btnBox {
    display: flex;
    align-items: center;
    .btn {
      font-weight: 500;
      font-size: 0.81rem;
      padding: 0.59rem 1.38rem;
      box-sizing: border-box;
      border-radius: 1rem;
      background: #ffffff;
    }
    .cancel {
      border: 0.03rem solid #707070;
      margin-right: 0.63rem;
    }
    .confirm {
      background: #f15353;
      color: #ffffff;
    }
  }
}
.Invitation_code {
  min-height: 100vh;
  padding-bottom: 4rem;
}
.pos {
  position: fixed;
  right: 0.75rem;
  bottom: 8.06rem;
  border-radius: 50%;
  background: #494949;
  text-align: center;
  font-size: 0.69rem;
  color: #ffffff;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list {
  .lis {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.94rem 0.75rem;
    box-sizing: border-box;
    margin-top: 0.63rem;
    .lis_t {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5rem;
      .lis_t_r {
        color: #000;
        font-weight: bold;
      }
      .time {
        font-weight: 400;
        font-size: 0.81rem;
        color: #6e6e79;
      }
      .status {
        font-size: 0.81rem;
        color: #6e6e79;
      }
      .lis_t_l {
        display: flex;
        align-items: center;
        .code {
          font-weight: 500;
          font-size: 0.81rem;
        }
        .tag {
          font-size: 0.69rem;
          color: #808080;
          padding: 0 0.1rem;
          border-radius: 0.19rem;
          border: 0.03rem solid #d6d6dc;
          margin-left: 0.22rem;
          line-height: 1rem;
        }
      }
    }
    .lis_t:last-child {
      margin-bottom: 0;
    }
  }
}
.code_box {
  margin: 0 0.75rem;
  .codeDetail {
    width: 21.94rem;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-top: -4.16rem;
    padding: 1.13rem 0 0.88rem 0;
    box-sizing: border-box;
    .codeDetail_btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1rem;
      .codeDetail_btn_c {
        border-radius: 1.13rem 1.13rem 1.13rem 1.13rem;
        border: 0.03rem solid #f15353;
        width: 5.25rem;
        height: 2rem;
        font-size: 0.88rem;
        color: #f15353;
        text-align: center;
        line-height: 2rem;
      }
      .codeDetail_btn_z {
        margin-left: 0.75rem;
        width: 5.25rem;
        height: 2rem;
        font-size: 0.88rem;
        color: #ffffff;
        text-align: center;
        line-height: 2rem;
        background: #f15353;
        border-radius: 1.13rem 1.13rem 1.13rem 1.13rem;
      }
    }
    .codeDetail_title {
      font-weight: bold;
      font-size: 0.94rem;
      color: #00001c;
      margin-bottom: 0.5rem;
    }
    .codeDetail_txt {
      font-size: 0.75rem;
      color: #808080;
    }
  }
}
</style>
